{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '组件:example/components/index', '加载状态'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <p>Bootstrap的“spinners”可用于显示项目中的加载状态。它们只使用HTML和CSS构建，这意味着您不需要任何JavaScript来创建它们。但是，您需要一些自定义JavaScript来切换它们的可见性。它们的外观、对齐和大小可以通过我们令人惊叹的实用程序类轻松定制。</p>
          <p>为了便于访问，这里的每个加载程序都包括 <code>role=“status"</code> 和嵌套的 <code>&lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;</code>。</p>
          <div class="border-example">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6 class="mt-3">颜色</h6>
          <p>你可以使用 <code>.text-primary</code> 等这样的文本颜色来定义加载动画的颜色。</p>
          <div class="border-example">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-secondary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-success" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-danger" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-warning" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-info" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-light" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-dark" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border text-primary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-secondary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-success" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-danger" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-warning" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-info" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-light" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-dark" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <div class="callout callout-info mt-3">为什么不使用 <code>border-color</code> 工具？每个旋转动画至少为一侧指定一个透明边框，因此 <code>.border-{color}</code> 工具将覆盖该边框。</div>

          <h6 class="mt-3">渐变增长式的加载</h6>
          <div class="border-example">
            <div class="spinner-grow" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-grow" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6>颜色</h6>
          <div class="border-example">
            <div class="spinner-grow text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-secondary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-success" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-danger" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-warning" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-info" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-light" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-dark" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-grow text-primary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-secondary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-success" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-danger" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-warning" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-info" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-light" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-dark" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h5>对齐</h5>
          <h6>外边距</h6>
          <p>使用类似于 <code>.m-5</code> 这样的 <code>margin</code> 工具。</p>
          <div class="border-example">
            <div class="spinner-border m-5" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border m-5" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h5>布局</h5>
          <h6>Flex</h6>
          <div class="border-example">
            <div class="d-flex justify-content-center">
              <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
              </div>
            </div>
          </div>
          <pre>&lt;div class="d-flex justify-content-center"&gt;
  &lt;div class="spinner-border" role="status"&gt;
    &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-items-center">
              <strong>加载中...</strong>
              <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-items-center"&gt;
  &lt;strong&gt;加载中...&lt;/strong&gt;
  &lt;div class="spinner-border ms-auto" role="status" aria-hidden="true"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>Floats</h6>
          <div class="border-example">
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">加载中...</span>
  </div>
</div>
          </div>
          <pre>&lt;div class="clearfix"&gt;
  &lt;div class="spinner-border float-end" role="status"&gt;
    &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>Text align</h6>
          <div class="border-example">
            <div class="text-center">
              <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
              </div>
            </div>
          </div>
          <pre>&lt;div class="text-center"&gt;
  &lt;div class="spinner-border" role="status"&gt;
    &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>大小</h6>
          <div class="border-example">
            <div class="spinner-border spinner-border-sm" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow spinner-grow-sm" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border spinner-border-sm" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow spinner-grow-sm" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <p>或者，使用自定义CSS或内联样式根据需要更改维度。</p>
          <div class="border-example">
            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6>按钮</h6>
          <div class="border-example">
            <button class="btn btn-primary" type="button" disabled="">
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              <span class="visually-hidden">加载中...</span>
            </button>
            <button class="btn btn-primary" type="button" disabled="">
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              加载中...
            </button>
          </div>
          <pre>&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/button&gt;
&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  加载中...
&lt;/button&gt;</pre>
          <div class="border-example">
<button class="btn btn-primary" type="button" disabled="">
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">加载中...</span>
</button>
<button class="btn btn-primary" type="button" disabled="">
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  加载中...
</button>
          </div>
          <pre>&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/button&gt;
&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  加载中...
&lt;/button&gt;</pre>

        </div>
      </div>
    </div>

  </div>